<template>
	<view class="container">
		<view style="background: #E7DBD6;">
			<StatusNavList :navList="_navList" bg-tab-color="#E7DBD6" @touchmove.stop.prevent @tabClick="tabClick()"></StatusNavList>
			<view class="coin">
				<view class="coin-tit">
					<text class="font-w-600">我的积分</text>
					<text class="coin-n">{{score}}</text>
				</view>
				<view>
					<view class="coin-b font-w-600" @click="tabbarTo('/pages/course/index')">积分获取</view>
				</view>
			</view>
			<view v-if="currentIndex==0" style="display: flex;background: #FFFFFF;border-radius: 20rpx;">
				<view style="flex: 1;display: flex;align-items: center;justify-content: center;"><text class="offline">线下助力</text></view>
				<view @click="toMyBenefit()" style="flex:1;text-align: center;margin: 40rpx 0rpx;"><text class="mybenefitbtn">我的公益></text></view>
			</view>
		</view>
		
		<view class="margin-15" v-if="currentIndex==1">
			<view style="margin: 30rpx;" @click="navTo()">
				<image mode="aspectFill" class="border-r-10" style="width: 100%;height: 300rpx;" :src="shop_entrance"></image>
			</view>
			
		</view>
		
		<view class="navbar" v-if="currentIndex==1">
				<view v-for="(item, index) in childTabList" :key="index" class="nav-item" :class="{diyCurrent: childCurrentIndex === index}"  @click="exchangeTabClick(index)">
				<view>{{item}}</view>
			</view>
		</view>
		
		<!-- 商品兑换 -->
		<view class="content" v-if="currentIndex==1">
			<view  class="content-grow">
				<scroll-view  class="list-scroll-content"   scroll-y @scrolltolower="loadData"	>
				<view v-for="(item, index) in coinGoods" :key="index" class="product-item" @click="toShopDetail(item.id)" >
					<view class="product-w">
						<image class="product-item-image" :src="item.pics[0]" mode="aspectFill"></image>
					</view>
					<view class="product-price-title">
						<text class="first">{{item.title}}</text>
					</view>		
					<view class="product-tag">
						<view class="product-tag-first">
							<text style="font-size: 30rpx;font-weight: 600">{{item.score}}</text>
							<text style="font-size: 26rpx;margin-left: 10rpx;">积分</text>
						</view>
						<view v-if="score>=item.score" class="go-exchange">去兑换</view>
						<view v-else class="score-no">积分不足</view>
					</view>
					
				</view>
				<view style="display: flex;align-items: center;justify-content: center;width: 100%;">
					<uni-load-more :status="loadingType"></uni-load-more>
				</view>
				</scroll-view>
				
			</view>
		</view>
		
		<!-- 公益联盟 -->
		<view v-if="currentIndex==0" class="content">
				
				<scroll-view   scroll-y @scrolltolower="loadBenifitData" style="height:100%">
				<view class="list-item" v-for="(item, index) in benifit_list" :key="index">
					<view class="list-main">
						<view style="position: relative;" @click="toDetail(item.id)">
							<image class="big_image" mode="aspectFill"  :src="item.pics[0]"></image>
						</view>
						<view class="second">
							<view class="left_1" @click="toDetail(item.id)">
								<view class="left_2">
									<image class="small-image" mode="aspectFill" :src="item.campus_info.logo"></image>
									<text class="sq-name">{{item.campus_info.name}}</text>
								</view>
								<view class="benifit-name">{{item.title}}</view>
							</view>
							<view class="zc-coin" v-if="item.user_benefit==0" @click="toDetail(item.id)">我要报名</view>
							<view class="zc-coin" v-else-if="item.user_benefit==1" style="background: rgba(108 ,177 ,94,0.2);color: #92C786;">报名申请中</view>
							<view class="zc-coin" v-else-if="item.user_benefit==2" style="background: rgba(108 ,177 ,94,0.2);color: #92C786;">已报名</view>
							<view class="zc-coin" v-else style="background: rgba(108 ,177 ,94,0.2);color: #92C786;">报名失败</view>
						</view>
					</view>
					
				</view>
				<uni-load-more :status="loadingType"></uni-load-more>
			</scroll-view>		
			
		</view>
	</view>
</template>
<!-- 自定义一些组件测试 -->
<script>
	import StatusNavList from "@/components/status-nav-list";
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import Api from '@/common/api';
	import { mapState } from 'vuex';  
	export default {
		components: {
			StatusNavList,
			uniLoadMore,
			
		},
		data() {
			return {
				page: 1,
				size: 6,
				more_data: true,
				currentIndex:0,
				_navList:['公益项目','积分超市'],
				// _navList:['线下公益','线上公益'],
				childTabList:['全部','我可兑换'],
				childCurrentIndex:0,
				loaded:false,
				loadingType: '',
				coinGoods:[],
				page2:1,
				size2:6,
				more_data2:true,
				loaded2:false,
				benifit_list:[],
				score:0,
				shop_entrance:''
			}
		},

		onLoad() {			
			this.loadPlatformResource()
		},
		computed: {
			...mapState(['hasLogin']),
		},
		onShow(){
			if(this.hasLogin){
				this.userCenter();
			}
			this.loadBenifitData();
		},
		beforeCreate() {

		},
		beforeDestroy() {


		},
		// 下拉刷新
		onPullDownRefresh() {
			
		},

		methods: {
			tabbarTo(url){
				uni.switchTab({
					url:url
				});
			},
			// 积分商品列表
			async loadData(){
				if (!this.more_data) {
					return; //没有数据不请求
				}				
				
				let params={
						page:this.page,
						size:this.size,
						type:this.childCurrentIndex==0?0:1
					};
				let data = await Api.apiCall('get', Api.apiName.score_goods_list, params);
				if (!data) { //出错时
					this.loadingType = 'noMore'
					return;
				}
				setTimeout(() => {
				
					this.coinGoods = this.coinGoods.concat(data.data)
					// loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					this.loaded = true;
					//判断是否还有数据， 有改为 more， 没有改为noMore
					if (data.data.length > 0 && data.data.length == this.size) {
						this.page++;
					} else {
						this.more_data = false;
				
					}
				
				}, 600);
			},
			async loadBenifitData() {
				if (!this.more_data2) {
					return; //没有数据不请求
				}			
				if (this.loadingType === 'loading') {
					//防止重复加载
					return;
				}
			
				this.loadingType = 'loading';
				let params = {
					page: this.page2,
					size: this.size2,
				};
				let data = await Api.apiCall('get', Api.apiName.benefit_list, params);
				if (!data) { //出错时
					this.loadingType = 'noMore'
					return;
				}
			
				setTimeout(() => {
			
					this.benifit_list = this.benifit_list.concat(data.data)
					// loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					this.loaded2 = true;
					//判断是否还有数据， 有改为 more， 没有改为noMore
					if (data.data.length > 0 && data.data.length == this.size2) {
						this.page2++;
						this.loadingType = 'more';
					} else {
						this.loadingType = 'nomore';
						this.more_data2 = false;
			
					}
			
				}, 600);
			},
			tabClick(status_nav_data) {
				this.currentIndex=status_nav_data;
				// this.coinGoods=[];
				// this.benifit_list=[];
				if(this.currentIndex==0){
					// this.page2=1;
					// this.more_data2=true;
					// this.loaded2=false;
					// this.loadingType='';
					this.loadBenifitData();
				}
				if(this.currentIndex==1){
					// this.page=1;
					// this.more_data=true;
					// this.loaded=false;
					// this.loadingType='';
					this.loadData();
				}
			},
			exchangeTabClick(index){
				this.childCurrentIndex=index;
				this.page=1;
				this.more_data=true;
				this.loaded=false;
				this.coinGoods=[];
				this.loadData()
			},
			async userCenter(){
				let data = await Api.apiCall('get',Api.apiName.user_main);
				if(!data){
					return;
				}
				this.score=data.data.score;
			},
			async loadPlatformResource(){
				let data = await Api.apiCall('get',Api.apiName.platform_resource);
				if(!data){
					return;
				}
				this.shop_entrance=data.data.basic.shop_entrance;
				
			},
			navTo(){
				this.$api.msg(`请联系观音桥工作人员`);
				setTimeout(function(){
					uni.makePhoneCall({
						phoneNumber:'1345565676'
					})
				},1500)
			},
			toDetail(id){
				uni.navigateTo({
					url:'/pages/benefit/detail?id='+id
				})
			},
			toMyBenefit(){
				uni.navigateTo({
					url:'/pages/benefit/index'
				})
			},
			toShopDetail(id){
				uni.navigateTo({
					url:'/pages/shop/detail?id='+id
				})
			},
		},


	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.content{
		height: 100vh;
		border-radius: 20rpx;
		margin-top: -12rpx;
		background: #FFFFFF;
		flex: 1;
		overflow-y: auto
	}
	.coin{
		border-radius: 20rpx 20rpx 0 0;
		background: rgba(255,255,255,0.75);
		display: flex;
		margin: 30rpx 30rpx 0rpx 30rpx;
		align-items: center;
	}
	.coin-tit{
		flex: 1;
		padding: 30rpx 50rpx;
	}
	.coin-n{
		color: #0191FF;
		margin-left: 20rpx;
		font-weight: 600;
	}
	.font-w-600{
		font-weight: 600;
	}
	.coin-b{
		padding: 10rpx 30rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		margin: 20rpx;
		font-size: 24rpx;
		color: #0191FF;
	}
	.margin-15{
		border-radius: 20rpx;
		margin-top: -6px;
		background: #FFF
	}
	.border-r-10{
		border-radius: 10rpx;
	}
	.navbar {
		display: flex;
		height: 100rpx;
		padding: 12rpx 30rpx;
		white-space: nowrap;	
		.nav-item {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			padding: 0rpx 30rpx;
			position: relative;
			flex-direction: column;
			width: 25%;
			justify-content: center;
		}
	}
	
	.diyCurrent {
		font-weight: 600;
	}
	
	.diyCurrent::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 35%;
		width: 25%;
		/* 或者你希望的特定长度 */
		height: 2px;
		/* 边框线的高度 */
		background: #0191FF;
	
	}
	.list-scroll-content{
		// height: 800rpx;
		height: 100%;
	}
	.content-grow{
		padding: 20rpx;
		height: 100%;
		.product-item{
			// height: 615rpx;
			width:335rpx;
			float: left;
			margin: 12rpx 10rpx;
			background: #ffffff;
			border-radius: 16rpx;
		
		}
		.product-item-title{
			padding: 14rpx 16rpx;
		}
		.product-item-title-first{
			width: 108rpx;
			height: 36rpx;
			font-size: 36rpx;
			line-height: 36rpx;
			
			font-weight: 800;
		}
		.product-tag{
			padding: 0rpx 20rpx;
			display: flex;
			align-items: center;
			margin-top: 10rpx;
			.product-tag-first{
				    font-size: 26rpx;
				    color: #ED703B;
					flex:1;
					padding: 10rpx 0rpx;
			}
			
		}
		
		
		.product-w{
			padding: 4rpx 18rpx;
		}
		.product-item-image{
			width: 100%;
			height: 250rpx;
			border-radius: 20rpx;
		}
		.product-price-title{
			padding: 4rpx 20rpx;
			.first{
				    display: inherit;
					overflow: hidden;
					font-size: 26rpx;
					font-weight: 600;
					text-overflow: ellipsis;
					white-space: nowrap;
			}
		}
	}
	.coin_content{
		height: 100%;
		background: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #999999;
	}
	
	.list-item {
		display: flex;
		background: #FFFFFF;
		margin: 20rpx;
		border-radius: 20rpx;
		flex-direction: column;
		
		.list-main{
			display: flex;
			flex-direction: column;
		}
		.big_image{
			width: 100%;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			height: 360rpx;
		}
		.small-image{
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
		}
	}
	.second{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 12rpx 20rpx;
	}
	.left_1{
		padding: 20rpx;
		flex: 1;
	}
	.left_2{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.sq-name{
		font-size: 24rpx;
		margin-left: 10rpx;
	}
	.benifit-name{
		font-size: 26rpx;
		font-weight: 600;
		margin-top: 10rpx;
	}
	.zc-coin{
		font-size: 28rpx;
		padding: 20rpx 20rpx;
		background: #6CB15E;
		border-radius: 10rpx;
		width: 180rpx;
		color: #FFFFFF;
		text-align: center;
	}
	.offline{
		font-size: 30rpx;
		font-weight: 800;
		border-bottom: 1px solid #666666;
		padding-bottom: 10rpx;
		border-bottom: 4rpx solid #000000;
	}
	.mybenefitbtn{
		padding: 10rpx 20rpx;
		border:1px solid #999999;
		border-radius: 30rpx;
		font-size: 24rpx;
		font-weight: 800;
	}
	.go-exchange{
		font-size: 24rpx;
		background: #ED703B;
		padding: 14rpx 30rpx;
		border-radius: 30rpx; 
		color: #FFFFFF;
	}
	.score-no{
		font-size: 24rpx;
		background: #C89883;
		padding: 14rpx 30rpx;
		border-radius: 30rpx;
		color:#EED5CB
	}
</style>